<template>
	<view class="page-wrapper">
		<div class="list" >
			<ul v-show="adShow" >
				<li v-for="(item, index) in addressList" :key="item.id" >
					<div class="touch-list list-touch "  @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :data-index="index" :style="item.txtStyle">
						<span v-text="item.name.split('')[0]" class="item-left"></span>
						<div class="item-center">
							<div class="item-center-top">
								<span v-text="item.name"></span>
								<p v-text="item.mobile"></p>
							</div>
							<div class="item-center-bottom">
								<span :style="item.is_main === 0 ? 'display: none' : ''">
									默认
								</span>
								<p v-text="item.province + item.city + item.district + item.street"></p>
							</div>
						</div>
						<div class="item-right">
							<image @click="goEdit(item)" src="../../../static/img/member/address/edit.png" mode="widthFix"></image>
						</div>
					</div>
					<div class="touch-list list-ismian" :style="item.is_main === 1 ? 'display: none' : ''" @click= "changeDefaultHandler(item.id, 1)" >
						设置默认
					</div>
					<div class="touch-list list-unmian" :style="item.is_main === 0 ? 'display: none' : ''" @click= "changeDefaultHandler(item.id, 0)" >
						取消默认
					</div>
					<div class="touch-list list-delete" @click= "deleteHandler(item.id)" >
						删除
					</div>
				</li>
			</ul>
			<hEmpty v-show="!adShow"  center="暂无可用地址" img="../../static/img/public/address-empty.png"></hEmpty>
		</div>
		<button class="add-btn" @click="goAdd" >+新增地址</button>
	</view>
</template>

<script>
	import hEmpty from '@/components/hEmpty/hEmpty.vue';
	import {api} from '@/util/api.js';
	
	export default {
		components: {
			hEmpty
		},
		data() {
			return {
				addressList: [],
				delBtnWidth: 200, //删除按钮宽度单位（rpx）
				startX:'',
				adShow: false
			}
		},
		watch: {
			addressList(oldV,newV) {
				if(this.addressList.length !== 0) {
					this.adShow = true;
				} else {
					this.adShow = false;
				}
			}
		},
		methods: {
			
			changeDefaultHandler(id, is_main) {
				api.setDefaultAddress({ id, is_main }, res => {
					if(res.code === 200) {
						this.addressList.forEach(item => {
							if(item.is_main === 1) {
								item.is_main = 0;
							}
						});
						this.addressList.forEach((item, index) => {
							item.txtStyle = 0;
							if(item.id === id) {
								item.is_main = 1;
								this.addressList.unshift(this.addressList.splice(index , 1)[0]);
							}
						});
						// this.getList();
					}
				})
			},
			
			deleteHandler(id) {
				api.deleteAddress({ id }, res => {
					if(res.code === 200) {
						this.addressList.forEach((item, index) => {
							item.txtStyle = 0;
							if(item.id === id) {
								this.addressList.splice(index, 1)
							}
						});
						// this.getList();
					}
				})
			},
			
			
			//左滑删除
			touchS: function (e) {
				// console.log('touchS')
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX=e.touches[0].clientX
				}
			},
			touchM: function (e) {
				if (e.touches.length == 1) {
					//手指移动时水平方向位置
					var moveX = e.touches[0].clientX;
					//手指起始点位置与移动期间的差值
					var disX = this.startX - moveX;
					var delBtnWidth = this.delBtnWidth;
					var txtStyle = "";
					if (disX == 0 || disX < 0) {//如果移动距离小于等于0，说明向右滑动，文本层位置不变
						txtStyle = "left:0rpx";
					} else if(disX > 0){//移动距离大于0，文本层left值等于手指移动距离
						txtStyle = "left:-" + disX + "rpx";
						if (disX >= delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							txtStyle = "left:-" + delBtnWidth + "rpx";
						}
					}
					//获取手指触摸的是哪一项
					var index = e.currentTarget.dataset.index;
					var list = this.addressList;
					list[index].txtStyle = txtStyle;
					//更新列表的状态
					this.addressList = [...list];
				}
			},
			touchE: function (e) {
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					//触摸开始与结束，手指移动的距离
					var disX = this.startX - endX;
					var delBtnWidth = this.delBtnWidth;
					//如果距离小于删除按钮的1/2，不显示删除按钮
					var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
					//获取手指触摸的是哪一项
					var index = e.currentTarget.dataset.index;
					var list = this.addressList;
					list[index].txtStyle = txtStyle;
					// console.log(list[index].txtStyle)
					//更新列表的状态{
					this.addressList = [...list];
				}
			},
			getList() {
				api.getAddressList({}, res => {
					res.data.forEach((item, index) => {
						if(item.is_main === 1) {
							res.data.unshift(res.data.splice(index , 1)[0]);
						}
					})
					this.addressList = res.data;
				})
			},
			goAdd() {
				uni.navigateTo({
					url: 'addAddress/addAddress'
				})
			},
			goEdit(item) {
				let obj = JSON.stringify(item);
				uni.navigateTo({
					url:'editAddress/editAddress?obj=' + obj 
				})
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getList();
		}
	}
</script>

<style scoped>
	
	.list {
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: 130rpx
	}
	.list>ul {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx 30rpx 30rpx;
	}
	.list>ul>li {
		width: 100%;
		overflow: hidden;
		margin-top: 20rpx;
		border-radius: 10rpx;
		position: relative;
	}
	.list>ul>li>div {
		width: 100%;
		border-radius: 10rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 30rpx 20rpx 30rpx 20rpx;
	}
	
	
	/*  */
	.touch-list{
		position: absolute; 
		top:0; 
		overflow: hidden;
	}
	.list-touch{
		position: relative;
		left: 0;
		z-index: 10;
		transition: left 0.2s ease-in-out;
	}
	
	.list-ismian {
		right: 100rpx;
		width: 110rpx!important;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #EF8833!important;
		border-radius: 0 10px 10px 0;
		color: #fff;
		font-size: 28rpx;
		z-index: 5;
	}
	
	.list-unmian {
		right: 100rpx;
		width: 110rpx!important;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #EF8833!important;
		border-radius: 0 10px 10px 0;
		color: #fff;
		font-size: 28rpx;
		z-index: 5;
	}
	
	.touch-list.list-delete{
		right: 0; 
		width: 110rpx!important;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #EB5428!important;
		border-radius: 0 10px 10px 0;
		color: #fff;
		font-size: 28rpx;
		z-index: 2;
	}
	
	/*  */
	
	.item-left {
		font-size: 34rpx;
		color: #A7A7A7;
		background-color: #D8D8D8;
		height: 65rpx;
		width: 65rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		flex-shrink: 0;
	}
	
	
	.item-center {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex-grow: 1;
		border-right: 1rpx solid #eee;
	}
	.item-center-top {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx
	}
	.item-center-top>span {
		font-size: 26rpx;
		color: #333333;
	}
	.item-center-top>p {
		color: #999999;
		font-size: 20rpx;
		margin-left: 10rpx
	}
	
	.item-center-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-center-bottom>span {
		display: flex;
		font-size: 14rpx;
		color: #027AFF;
		background-color: #87C6FF;
		width: 39rpx;
		height: 22rpx;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}
	
	
	.item-center-bottom>p {
		color: #666666;
		font-size: 22rpx;
	}
	
	
	.item-right {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding-left: 30rpx;
	}
	.item-right>image {
		width: 30rpx;
	}
	
	
	
	.add-btn {
		width: 602rpx;
		height: 90rpx;
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		position: absolute;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
		font-size: 34rpx;
		z-index: 10;
	}
	
	
</style>
